<template>
  <div class="container">
    <scroll-view :scroll-y="true" @scrolltolower="pullrefresh" :style="{'height': '100%'}">
      <ul class="ul" v-if="list.length>0">
        <li class="li" v-for="(item,index) in list" :key="index" @click="check(list,item)">
          <img :src="baseUrl+item" alt class="img" />
        </li>
      </ul>
      <div class="empty" v-if="!list">
        <img
          src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nohostial.png"
          alt
          class="img"
        />
        <div class="text">暂无医院图片</div>
      </div>
    </scroll-view>
  </div>
</template>   

<script>
import common from "@/assets/js/mmk_common.js";
import prolist from "@/components/search_list/projects_list";
export default {
  data() {
    return {
      imgUrl: common.image_resource,
      baseUrl: common.image_response,
      list: [],
      arr: []
    };
  },
  onLoad: function(options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "医院图片"
    });
    this.list = wx.getStorageSync("hospital_photo");
    console.log(this.list);
    this.arr = wx.getStorageSync("hospital_photo");
  },
  methods: {
    check(item,val) {
      common.tapBigImg(item, val);
    }
  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 15px 4px 15px 15px;
  .ul {
    .li {
      display: inline-block;
      width: 46.8%;
      height: auto;
      margin: 0 11px 11px 0;
      .img {
        width: 100%;
        display: inline-block;
      }
    }
  }
  .empty {
    width: 100%;
    height: 100%;
    position: relative;
    .img {
      width: 105px;
      height: 105px;
      position: absolute;
      transform: translate(-50%, -100%);
      top: 50%;
      left: 50%;
    }
    .text {
      color: #999;
      font-size: 14px;
      position: absolute;
      transform: translate(-50%, -60%);
      top: 50%;
      left: 50%;
    }
  }
}
</style>